<template>
  <div>
    <el-container>
      <el-header>
        <router-link to="/blogs">
          <img src="https://www.markerhub.com/dist/images/logo/markerhub-logo.png"
               style="height: 60%; margin-top: 10px;">
        </router-link>
      </el-header>
      <el-main class="login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <div class="codee">
            <el-form-item label="验证码" prop="code" style="width: 66%">
              <el-input v-model="ruleForm.code" @keyup.enter.native="submitForm('ruleForm')"></el-input>

            </el-form-item>

<!--            <div class="login-code">-->
              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
<!--            </div>-->
          </div>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">点击登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ElementUI from "element-ui";

export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        username: 'markerhub',
        password: '123456',
        code: '',
        uuid: ''
      },
      codeUrl: '',
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'change'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'change'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;

          this.$axios.post('/login', this.ruleForm/*, {params:this.ruleForm}*/).then(result => {
            const datee = result.data;
            if (datee.code === 1001) {
              //请求成功
              //设置用户信息和token到本地缓存
              //const token = result.headers['authorization']
              const userinfo = datee.data
              _this.$store.commit('SET_TOKEN', userinfo.token)
              _this.$store.commit('SET_USERINFO', userinfo)
              _this.$router.push("/blogs")
            } else {
              ElementUI.Message({
                showClose: true,
                message: datee.message,
                type: 'error',
                duration: 2 * 1000
              });
              //重新刷新验证码
              this.getCode()
              //this.ruleForm.code = ''
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCode() {
      //生成验证码
      this.$axios.get("/verifyCode/generate").then(result => {
        this.codeUrl = "data:image/gif;base64," + result.data.data.encode
        this.ruleForm.uuid = result.data.data.uuid
        this.ruleForm.code = result.data.data.code
      });
    }
  },
  created() {
    this.getCode();
  }
}
</script>

<!--<style scoped lang="scss">-->
<style scoped lang="scss">
.el-header, .el-footer {
  /*background-color: #333;*/
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.login-form {
  //max-width: 500px;
  margin: 0 auto;
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;
  display: inline-block;
  margin-left: 50px;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 38px;
  width: 80px;
  margin-left: 16px;
  border:1px solid darkgrey;
}

.codee {
  display: flex;
}
</style>
